<template>
	<view class="zone">
		<Header title="我的夺宝"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>

			<view class="info">

				<view class="tab">
					<view v-for="(item,index) in tablist" :key="index" :class="['tabbae',stat == item.id?'active':'']"
						@click="tabchange(item.id)">{{item.name}}
					</view>
				</view>

				<view class="staname">
					<view class="name1">
						头像
					</view>
					<view class="name2">
						昵称/期数
					</view>
					<view class="name2">
						开奖状态
					</view>
					<view class="name3">
						获奖物品
					</view>
				</view>

				<scroll-view class="list" scroll-y="true" @scrolltolower="scrolllist">
					<view class="item" v-for="(item,index) in listdata[stat]" :key="index">
						<image class="header" :src="userinfo.avatar" mode="widthFix"></image>
						<view class="ybox">
							<view class="name">
								{{item.name}}
							</view>
							<view class="sind">
								{{item.remark}}
							</view>
						</view>
						<view class="statw">
							{{item.status==2?'待开奖':item.status==3?'我中奖':item.status==4?'未中奖':'无'}}
						</view>
						<view class="right">
							<image :src="item.img" mode="widthFix"></image>
						</view>
					</view>
					<view class="empty" v-if="listdata[stat] == ''">
						<text>数据为空</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '全部',
						isrequest: true,
					},
					{
						id: 2,
						name: '待开奖',
						isrequest: false,
					},
					{
						id: 3,
						name: '我中奖',
						isrequest: false,
					},
					{
						id: 4,
						name: '未中奖',
						isrequest: false,
					},
				],
				stat: 1,
				page: [1, 1, 1, 1, 1],
				max_page: [1, 1, 1, 1, 1],
				listdata: {
					0: [],
					1: [],
					2: [],
					3: [],
					4: [],
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
                userinfo:uni.getStorageSync('userinfo'),
			}
		},
		onLoad() {
			this.orderlogs(this.stat);
		},
		methods: {
			// tab
			tabchange(id) {
				this.stat = id
				if (id == 2 && !this.tablist[id - 1].isrequest) {
					this.orderlogs(id)
				} else if (id == 3 && !this.tablist[id - 1].isrequest) {
					this.orderlogs(id)
				} else if (id == 4 && !this.tablist[id - 1].isrequest) {
					this.orderlogs(id)
				}
			},
			async orderlogs(stat) {
				let res = await this.$http.index.orderlogs({
					page: this.page[stat],
					type: stat
				})
				if (res.code == 1) {
					this.tablist[stat - 1].isrequest = true
				}
				this.max_page[stat] = res.data.last_page
				this.listdata[stat] = [...this.listdata[stat], ...res.data.data]
				if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[this
					.stat]) this.status =
					'nomore';
			},
			scrolllist() {
				if (this.page[this.stat] >= this.max_page[this.stat]) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page[this.stat] = ++this.page[this.stat];
				if (this.stat == 1) {
					this.orderlogs(this.stat)
				} else if (this.stat == 2) {
					this.orderlogs(this.stat)
				} else if (this.stat == 3) {
					this.orderlogs(this.stat)
				} else if (this.stat == 4) {
					this.orderlogs(this.stat)
				}
				setTimeout(() => {
					if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
							this.stat]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;

		.main {
			width: 100%;
			position: relative;
			margin-top: 10px;
		}

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.info {
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			padding: 10px 6px 0;
		}

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 8px;
		}

		.tabbae {
			width: 24%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
		}

		.active {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}

		.list {
			height: calc(100vh - 185px);
			overflow-y: scroll;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2px;
			padding: 7px 10% 7px 4%;
			box-sizing: border-box;
		}

		.empty {
			font-size: 16px;
			font-weight: 500;
			color: #943527;
			line-height: 20vh;
			text-align: center;
		}

	}

	.staname {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/rank/mg-11.png) no-repeat;
		background-size: 100% 100%;
		font-weight: normal;
		font-size: 15px;
		color: #333333;
		line-height: 15px;
		padding: 11px 10% 11px 2%;
		margin-bottom: 6px;
	}

	.header {
		width: 47px;
        border-radius: 50%;
	}


	.ybox {
		flex: 1;
		margin-left: 4px;
		width: 40%;
	}

	.name {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 14px;
		margin-bottom: 9px;
		white-space: nowrap;
		/*不允许换行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
	}

	.sind {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 14px;
	}

	.right {
		width: 15%;

		image {
			width: 100%;
			background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.statw {
		flex: 1;
		width: 10%;
		font-size: 14px;
		font-weight: normal;
		color: #FF3399;
		line-height: 24px;
	}
</style>